<template>
	<view class="">
		<view class="v-home-page"
			:style="{ '--bg-image': `url(${ mineBg})`, height: memberSetObj.is_open==2 ? '480rpx' :!user.id? '582rpx':'596rpx' }">
			<view :style="{ height: navTop + 'px' }"></view>
			<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn_phone">
				<view class="flex-align-center v-top">
					<!-- <image :src="user.avatar ? user.avatar : avatarUrl"></image> -->
					<image :src="avatarUrl"></image>
					<view class="flex-columns v-name " style="margin-bottom: 35rpx;">
						<view class="font-weight_bold"> {{ user.telphone ? user.telphone : '点击登录' }}</view>
						<!-- <text>{{ user.nickname && user.telphone ? user.telphone : '' }}</text> -->

						<image v-if="user.is_member" class="memberImgs" :src="group857Nine" mode="aspectFill"></image>

					</view>
				</view>
			</button>
			<view class="detailsContainer flex-between  margin-top_20rpx" v-if="user.id">

				<block v-for="(i, j) in integralStatList" :key="j">
					<view class="flex-column v-price" @click="toGo(i.url)">
						<view style="color: #333333;font-weight: 700;">{{ i.num }}</view>
						<text style="font-size: 28rpx;color:#494949; margin-top: 10rpx;">{{ i.title }}</text>
					</view>

				</block>

			</view>
			<view class="detailsContainer flex-between  margin-top_20rpx" v-if="!user.id">

				<block v-for="(i, j) in integralStatLists" :key="j">
					<view class="flex-column v-price" @click="toGo(i.url)">
						<view style="color: #333333;font-weight: 700;">{{ i.num }}</view>
						<text style="font-size: 28rpx;color:#494949; margin-top: 10rpx;">{{ i.title }}</text>
					</view>

				</block>

			</view>
			<view class="rightsInterests flex-between" @click="memberCenterFn()" v-if="memberSetObj.is_open==1">
				<view class="">
					<view class="font-weight_bold" style="color: #FACA8F;font-size: 30rpx;">
						{{user.is_member?'尊贵的会员用户':'开通会员享权益'}}

					</view>
					<view class="margin-top_20rpx" style="color: #CEC7BF;font-size: 22rpx;">

						{{!user.is_member?'开通每次剪辑享受优惠权益':'到期时间：'+user.maturity_time}}
					</view>
				</view>
				<view class="">
					<image v-if="user.is_member" class="upgrade" :src="group2425" mode=""></image>
					<image class="upgrade" :src="group3273Five" mode="" v-else></image>

				</view>

			</view>




		</view>
		<view class="gradientBg" v-if="user.id">
			<view class="bgImg" :style="{ '--bg-images': `url(${ aaabg})` }" v-if="brokerageSet.is_open==1">
				<view class="flex-between padding-bottom_20rpx border-bottom-ECECEC">
					<view class="" style="font-size: 36rpx;">
						我的钱包
					</view>
					<!-- 
					<view class="flex-start-center " style="color:#000000;">
						<text style="color: #999999;font-size: 28rpx;"> 明细</text>
						<uni-icons style="margin-top: 7rpx" color="#999999" type="right" size="18"></uni-icons>

					</view> -->

				</view>

				<view class="flex-between margin-top_30rpx" @click="myCommission()">
					<view class="">
						<view class="" style="font-size: 28rpx;color: #999999;">
							我的佣金（元）
						</view>
						<view class="margin-top_20rpx" style="color: #196DFB;font-size: 50rpx;">
							{{uid?brokerage:'0.00'}}
						</view>
					</view>
					<view class="">
						<uni-icons style="margin-top: 7rpx" color="#999999" type="right" size="18"></uni-icons>
					</view>
				</view>

				<view class="flex-around  WalletIncome margin-top_30rpx" v-if="user.id">
					<block v-for="(i, j) in brokerageList" :key="j">
						<view class="flex-column v-price" @click="toGo(i.url)">
							<view style="color: #196DFB;font-weight: 700;">{{ i.num }}</view>
							<text style="font-size: 28rpx;color:#000000; margin-top: 10rpx;">{{ i.title }}</text>
						</view>

					</block>
				</view>

				<view class="flex-around  WalletIncome margin-top_30rpx" v-else>
					<block v-for="(i, j) in brokerageLists" :key="j">
						<view class="flex-column v-price" @click="toGo(i.url)">
							<view style="color: #196DFB;font-weight: 700;">{{ i.num }}</view>
							<text style="font-size: 28rpx;color:#000000; margin-top: 10rpx;">{{ i.title }}</text>
						</view>

					</block>
				</view>


			</view>

		</view>

		<view class="v-padding" :style="{  marginTop: uid?0:40 + 'rpx' }">
			<view class="v-title flex-align-center">
				<text></text>
				<view>常用功能</view>
			</view>

			<view class="flex-wrap-flex-start">
				<block v-for="(i, j) in list" :key="i">


					<view class="v-order  margin-bottom_40rpx" v-if="i.url=='share'">
						<button open-type="share" class="btncss flex-column">
							<image :src="i.img"></image>

							<view>{{ i.text }}</view>
						</button>

					</view>
					<block v-else>
						<view class="v-order flex-column margin-bottom_40rpx" @click="toGo(i)"
							v-if="!(brokerageSet.is_open!=1&&(i.text=='佣金记录'||i.text=='分销中心'))">

							<image :src="i.img"></image>

							<view>{{ i.text }}</view>


						</view>
					</block>
				</block>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTop: '',
				group3273Five: this.$imgs.group3273Five,
				group857Nine: this.$imgs.group857Nine,
				group2425: this.$imgs.group2425,
				user: '',
				mineBg: this.$imgs.mineBgFive,
				aaabg: this.$imgs.aaabg,

				list: [{
						img: this.$imgs.group3285Five,
						text: '分销中心',
						url: '/pages/partnerPromotion/promotionCenter',
						isTrue: 1
					},
					{
						img: this.$imgs.group3279Five,
						text: '我的团队',
						url: '/pages/partnerPromotion/myTeam',
						// ==0 则分销关闭 isTrue为1展示
						isTrue: uni.getStorageSync('system').distributionSet && uni.getStorageSync('system')
							.distributionSet.distribution_level == 0 ? 2 : 1
					},
					{
						img: this.$imgs.group3511,
						text: '代理管理',
						url: '/pages/contactUs/managementLogin',
						isTrue: 1,
						subscribeMessage: 'subscribeMessage'

					},

					{
						img: this.$imgs.group3281Five,
						text: '扣点记录',
						isTrue: 1,
						url: '/pages/contactUs/deductionRecord',
					},

					{
						img: this.$imgs.group3284Five,
						text: '佣金记录',
						isTrue: 1,
						url: '/pages/partnerPromotion/distributionDetails'

					},


					{
						img: this.$imgs.digitalAssets,
						text: '数字资产',
						isTrue: 1,
						url: '/pagesA/creatCenter/imageList/imageList'

					},
					{
						img: this.$imgs.helpCenter,
						text: '帮助中心',
						isTrue: 1,
						url: '/pages/contactUs/helpCenter'

					},
					{
						img: this.$imgs.group3282Five,
						text: '联系我们',
						isTrue: 1,
						url: '/pages/contactUs/contactUs'

					},


				],
				integralStatList: [],
				brokerageList: [],
				brokerage: '',
				avatarUrl: this.$imgs.avaterFive,
				integralStatLists: [


					{
						num: '0.00',
						title: '当前算力点'

					},
					{
						num: '0.00',
						title: '当前收益'

					},
					{
						num: 0,
						title: '剪辑中任务'

					}
				],
				brokerageSet: {},
				brokerageLists: [


					{
						num: '0.00',
						title: '累计收益'

					},
					{
						num: '0.00',
						title: '今日收益'

					},
					{
						num: '0.00',
						title: '昨日收益'

					}
				],
				uid: uni.getStorageSync('uid'),
				memberSetObj: {},
				mobile: '',
				phone: '',
				inputPhone: '',
				unionid: ''

			}
		},
		onLoad() {


			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.userStatisFn()
			this.userInfos()
			this.brokerageStatis()

			this.brokerageSetFn()

			this.memberSetFn()


		},
		onShow() {
			this.userStatisFn()
		
			this.brokerageStatis()

			this.brokerageSetFn()
            	this.userInfos()
			this.memberSetFn()
		},
		computed: {


		},
		methods: {
			// 获取手机号
			onGetPhoneNumber(e) {
				var _that = this;
				// 用户点击了接受
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					let encryptedData = e.detail.encryptedData;
					let errMsg = e.detail.errMsg;
					let iv = e.detail.iv;
					const code = e.detail.code;
					_that.cc = code;
					_that.getKeyByCode(_that.cc, encryptedData, iv);
				} else {
					/* uni.switchTab({
						url: '/pages/index/index'
					}); */
				}
			},
			// 获取手机号解密接口
			async getKeyByCode(code, encryptedData, iv) {
				const result = await this.$http.get({
					url: this.$api.getTelphone,
					data: {
						code: code
					}
				});
				if (result.errno == 0) {
					console.log('data', result.data);
					this.mobile = result.data.phone_info.phoneNumber;
					this.phone = this.mobile;
					this.inputPhone = this.mobile; // 为了获取手机号同步不展示验证码
					this.getUserProfile()
				}
			},

			getUserProfile() {
				console.log(uni.getStorageSync('pid'), 'uid============')
				if (!this.phone) {
					this.$sun.toast('请先完成获取手机号');
					return;
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$sun.toast('请输入有效的手机号');
					return false;
				} else {

					uni.showLoading({
						title: '登录中...',
						mask: true
					});
					uni.setStorageSync('mobile', this.phone);
					wx.login({
						provider: 'weixin',
						success: async res => {
							const openInfo = await this.$http.get({
								url: this.$api.getOpenId,
								data: {
									code: res.code
								}
							});
							if (openInfo.errno == 0) {
								let key = openInfo.data.session_key;
								var openid = openInfo.data.openid; //openid 用户唯一标识
								this.unionid = openInfo.data.unionid
								console.log(openInfo.data)
								// 设置openid（先用微信的wx.login方法 再调用后端返回获取openid接口（传code)
								wx.setStorageSync('openid', openid);
								wx.setStorageSync('code', res.code);

								setTimeout(() => {
									uni.request({
										url: this.$api.register,
										method: 'GET',
										data: {
											telphone: this.phone,
											unionid: this.unionid ? this.unionid : '',
											/*  * 新增微信用户
											 * @param openid
											 * @param avatar 头像
											 * @param nickname 昵称
											 * @param dy_uid 抖音uid */
											// 微信用户opendid
											openid: wx.getStorageSync('openid'),
											// 微信用户昵称
											// nickname: user.nickName,
											// 独立小程序需要
											nickname: this.nickname ? this.nickname : '默认昵称',
											// 微信用户头像
											avatar: this.avatarUrl ? this.avatarUrl :
												'https://tuanma.weijuyunke.com/index/images/material.png',
											// 分销pid
											// pid : pid
											pid: uni.getStorageSync('pid') !== null && uni
												.getStorageSync('pid') !== undefined && uni
												.getStorageSync('pid') !== '' ? uni
												.getStorageSync('pid') : ''

										},
										success: res => {
											console.log('uid', res.data);
											wx.setStorageSync('uid', res.data.data);
											if (res.errMsg == 'request:ok') {
												wx.setStorageSync('isTrue', 1);
												this.$sun.toast('登录成功');
												setTimeout(() => {
													this.userInfos();
													this.userStatisFn()
															
													this.brokerageStatis()
													
													this.brokerageSetFn()
											
													this.memberSetFn()
												}, 200)
											}
										},
										fail: err => {
											uni.showModal({
												title: '错误',
												content: `访问公众平台接口失败, 错误: invalid appsecret, view more at http://t.cn/RAEkdVq, hints: [ req_id: WeMfdZyFe-D3JW7 ],错误详情：无效的appsecret`,
												showCancel: false
											});
										},
										complete: info => {
											// 由于wx.getUserProfile被删除了，所以获取不到res.user
											// wx.setStorageSync('userInfo', user);
										}
									});
								}, 500);
								uni.hideLoading()
							} else {
								setTimeout(() => {
									console.log('失败', res);
								}, 2000);
								uni.hideLoading()
							}
						}
					});
				}
			},

			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},



			async templateTpo() {
				if(uni.getStorageSync("templateSet").pay_success_template||uni.getStorageSync(
							"templateSet").member_success_template){
					wx.requestSubscribeMessage({
						tmplIds: [uni.getStorageSync("templateSet").pay_success_template, uni.getStorageSync(
							"templateSet").member_success_template],
						success: res => { //成功、
							if (res[Object.keys(res)[0]] == "accept") {
								console.log(res)
								// this.$sun.toast("成功订阅")
							} else {
								uni.showModal({
									title: "温馨提示",
									content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
								})
							}
						},
						fail: err => { //失败
							this.$sun.toast("订阅消息配置失败");
						}
					})
				}

				

			},


			async brokerageSetFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageSet,
					data: {


					}
				});
				if (result.errno == 0) {



					this.brokerageSet = result.data
					uni.setStorageSync('brokerageSet', result.data);
				}
			},
			handleLogin() {
				if (this.user.id) {
					return true;
				} else {
					setTimeout(()=>{
						this.$sun.toast("请先授权登录");
					},500)
					uni.switchTab({
						url: `/pages/mine/mine`
					});
				}
			},
			async userStatisFn() {
				const result = await this.$http.get({
					url: this.$api.userStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.integralStatList = [


						{
							num: result.data.balance,
							title: '当前算力点'

						},
						{
							num: result.data.brokerage,
							title: '当前收益'

						},
						{
							num: result.data.waitCount,
							title: '剪辑中任务'

						}
					]


					// this.brokerageList=result.data.map((item)=>{
					// 	return {
					// 		num:'',
					// 		title:''
					// 	}
					// })


				}
			},
			async brokerageStatis() {
				const result = await this.$http.get({
					url: this.$api.brokerageStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					this.brokerage = result.data.brokerage
					this.brokerageList = [


						{
							num: result.data.allGet,
							title: '累计收益'

						},
						{
							num: result.data.todayGet,
							title: '今日收益'

						},
						{
							num: result.data.yesterdayGet,
							title: '昨日收益'

						}
					]

					// this.brokerageList=result.data.map((item)=>{
					// 	return {
					// 		num:'',
					// 		title:''
					// 	}
					// })


				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;



					uni.setStorageSync('user', result.data);


				}
			},

			memberCenterFn() {
				if (this.handleLogin()) {
					this.templateTpo()

					this.$sun.navGo('/pages/contactUs/memberCenter')
				}



			},
			myCommission() {
				this.$sun.navGo('/pages/partnerPromotion/distributionDetails')
			},
			toGo(item) {
				console.log(item)
				if (item.url == 'poster') {
					if (this.handleLogin()) {
						this.$sun.navGo('/pages/distribution/distributionPoster')
					}




				} else if (item.url == 'poster') {
					console.log('分享')
				} else if (item.subscribeMessage == 'subscribeMessage') {
					if (this.handleLogin()) {
						this.$sun.navGo(item.url)
					}

				} else {
					if (this.handleLogin()) {
						this.$sun.navGo(item.url)
					}
				}

			},

		}
	}
</script>

<style lang="less">
	.gradientBg {
		width: 750rpx;
		// height: 307.28rpx;
		border-radius: 20rpx;
		position: relative;
		margin-top: -20rpx;
		background: linear-gradient(180.00deg, rgb(255, 255, 255) 21.978%, rgba(255, 255, 255, 0) 100%);
		padding: 30rpx 20rpx;

		.bgImg {
			background-image: (var(--bg-images));
			background-repeat: no-repeat;
			background-size: contain;
			position: relative;
			// width: 720rpx;
			height: 428.52rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(255, 255, 255);
			border-radius: 20rpx;
			backdrop-filter: blur(8rpx);
			background-color: #fff;
			// background: radial-gradient(100.00% 100.00% at 50% 0%, rgb(233, 248, 255), rgba(255, 255, 255, 0.64) 47.912%, rgb(255, 255, 255) 100%);

		}

		.WalletIncome {
			// width: 692.5rpx; 
			height: 119.82rpx;
			border-radius: 20rpx;

			background: rgb(244, 246, 248);
		}

	}

	.v-padding {
		padding: 40rpx 0 4rpx;
		margin: 0rpx 20rpx 0;
		border-radius: 20rpx;
		background: #fff;

		box-shadow: 8rpx 2rpx 8rpx #65b0f90f;

		.v-title {
			padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #196DFB;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.v-order {
			position: relative;
			width: calc(100% / 4);

			image {
				width: 51rpx;
				height: 51rpx;
			}

			text {
				position: absolute;
				top: -12rpx;
				left: 102rpx;
				padding: 0 12rpx;
				line-height: 34rpx;
				display: inline-block;
				// min-width: 34rpx;
				height: 34rpx;
				font-size: 20rpx;
				color: #fff;
				background-color: orangered;
				border-radius: 50%;
			}

			view {
				margin-top: 28rpx;
				color: #333;
			}
		}
	}

	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;

		width: 750rpx;
		// height: 588.06rpx;
		padding: 20rpx;

		.btn_phone {
			background-color: transparent;
		}


		.v-top {
			// padding: 44rpx 34rpx 40rpx;
			position: relative;
			height: 190rpx;

			.memberImg {
				position: absolute;
				top: 127rpx;
				width: 108rpx;
				height: 30rpx;
				z-index: 99;
				left: 28rpx;
				border-radius: 0;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 22rpx;
			}

			.v-name {
				font-size: 32rpx;

				view {
					color: #333333;
				}

				text {
					color: #333333;
					margin-top: 20rpx;
				}

				.memberImgs {
					position: absolute;
					top: 117rpx;
					width: 108rpx;
					height: 30rpx;
					z-index: 99;
					left: 124rpx;
					border-radius: 0;
				}
			}
		}

		.detailsContainer {
			// width: 642rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.v-price {
				color: #fff;
				// margin-bottom: 48rpx;
				width: calc(100% / 3);

				view {
					color: #fff;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
			}

		}

		.rightsInterests {
			// width: 720rpx;
			height: 148.22rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 30rpx;
			padding: 20rpx;

			background: rgb(41, 41, 41);

			.upgrade {
				width: 184rpx;
				height: 72rpx;
			}
		}

	}
</style>